{{extend name="index/index" /}}

{{block name="main"}}
<div class="container" style="margin:20px auto">
    <div class="col-lg-3">
        <div style="border-radius:50%; overflow:hidden; border:2px solid #ed9c28; width:100px; height:100px;
        display:block">
            {{if condition="($data['icon'])"}}
            <img src="{{$data['icon']}}" width="100%" height="100%" class="img-rounded .img-responsive">
            {{else /}}
            <img src="/static/admin/img/default.jpg" width="100%" height="100%" class="img-rounded .img-responsive">
            {{/if}}
        </div>
        <ul class="nav nav-pills nav-stacked">
            <a href="{{:url('/center')}}" class="list-group-item"><span class="glyphicon glyphicon-user"
                                                      aria-hidden="true"></span>基本资料</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-list-alt"></span>详细资料</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-picture"></span>我的照片</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-heart-empty"></span>我的好友</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-gift"></span>礼物往来</a>
            <a href="{{:url('index/center/vip')}}" class="list-group-item"><span class="glyphicon glyphicon-tower"></span>会员中心</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-yen"></span>消费记录</a>
            <a href="#" class="list-group-item"><span class="glyphicon glyphicon-eye-open"></span>修改密码</a>
        </ul>
    </div>

    <div class="col-lg-9">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <span class="navbar-brand">基本资料</span>
            </div>
        </nav>
        <div class="bs-example" style="margin-top:20px">
            <form action="{{:url('index/center/update', ['id'=>$data['id']])}}" class="form-horizontal" method="post" enctype="multipart/form-data">
                <input type="hidden" name="_method" value="PUT">
                <input type="hidden" name="id" value="{{$data.id}}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-10">
                        <input type="text" name="nickname" class="form-control" value="{{$data['nickname']}}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" value="{{$data['tel']}}(不能修改)" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" value="{{$data['sex']=='1'?'男':'女'}}(不能修改)" readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">头像</label>
                    <div class="col-lg-5">
                        <label for="inputFile">
                            {{if condition="($data['icon'])"}}
                            <img src="{{$data['icon']}}" width="80" class="img-rounded .img-responsive"
                                 id="picon" name="picon">
                            {{else /}}
                            <img src="/static/admin/img/default.jpg" width="80" class="img-rounded .img-responsive"
                                 id="picon" name="picon">
                            {{/if}}
                            <p>点击更换头像</p>
                        </label>
                    </div>
                    <div class="col-lg-1" style="display: none">
                        <input type="file" id="inputFile" class="btn btn-primary" name="icon">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-10">
                        <input type="date" name="birthday" class="form-control" value="{{$data['birthday']}}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">省份</label>
                    <div data-toggle="distpicker" class="">
                        <div class="col-sm-3">
                            <label class="sr-only" for="province1">Province</label>
                            <select class="form-control" id="province1" name="province" data-province="{{$data['province']}}"></select>
                        </div>
                        <div class="col-sm-3">
                            <label class="sr-only" for="city1">City</label>
                            <select class="form-control" id="city1" name="city" data-city="{{$data['city']}}"></select>
                        </div>
                        <div class="col-sm-3">
                            <label class="sr-only" for="district1">District</label>
                            <select class="form-control" id="district1" name="area" data-district="{{$data['area']}}"></select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">薪资</label>
                    <div class="col-sm-3">
                        <label class="sr-only"></label>
                        <select name="salary" class="form-control">
                            <option value="0" {{$data['salary']=='0'?'selected':''}}>3000以下</option>
                            <option value="1" {{$data['salary']=='1'?'selected':''}}>3000-5000</option>
                            <option value="2" {{$data['salary']=='2'?'selected':''}}>5000-8000</option>
                            <option value="3" {{$data['salary']=='3'?'selected':''}}>8000-11000</option>
                            <option value="4" {{$data['salary']=='4'?'selected':''}}>11000-15000</option>
                            <option value="5" {{$data['salary']=='5'?'selected':''}}>15000-20000</option>
                            <option value="6" {{$data['salary']=='6'?'selected':''}}>20000-30000</option>
                            <option value="7" {{$data['salary']=='7'?'selected':''}}>30000-50000</option>
                            <option value="8" {{$data['salary']=='8'?'selected':''}}>50000以上</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">职业</label>
                    <div class="col-sm-10">
                        <input type="text" name="career" class="form-control" value="{{$data['career']}}">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default btn-danger">保存修改</button>
                        <a href="" type="submit" class="btn btn-default btn-primary">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{{/block}}

{{block name="myjs"}}
<script>

    // 设置提示泡弹框参数
    toastr.options = {
        closeButton: true,//是否显示关闭按钮
        progressBar: true,//实现显示计时条
        timeOut: "3000",//自动关闭时间
        positionClass: "toast-bottom-left"//提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };


    // 上传图标
    //为文件上传添加change事件
    $('#inputFile').on("change", function () {
        // 获取元素节点
        var fileM = document.querySelector("#inputFile");
        //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
        var fileObj = fileM.files[0];
        //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
        var formData = new FormData();
        formData.append('file', fileObj);

        $.ajax({
            type: 'post',
            url: '/center/pic',
            data: formData,
            // cache: false,
            // 传输数据类型, 不使用json
            processData: false,
            // 不设置头文件信息
            contentType: false,
            dataType: 'json',
            success: function (data) {
                if (data) {
                    console.log(data);
                    var path = "http://" + data.data;
                    $('#picon').attr('src', path);
                    $("#inputFile").attr('data-icon', data);
                } else {
                    toastr.warning(data.mesage);
                }
            },
            error: function () {
                toastr.error('AJAX执行失败');
            }
        });
    });
</script>
{{/block}}